<template>
  <div class="sellhot">
    <div class="sellhot-title">
      <img class="img-width-max" src="/static/img/home-sellhot.png">
    </div>
    <router-link tag="div" v-if="banner.url" :to="banner.url" class="members_imgad">
      <img class="img-width-max" :src="banner.path">
    </router-link>
    <div v-else class="members_imgad">
      <img class="img-width-max" :src="banner.path">
    </div>
    <ul class="img-box">
      <router-link :to="'/detail/' + item.id"  v-for="item of list" :key="item.id">
        <li class="sellhot-item">
          <div class="sellhot-img">
            <img class="img-width-max sellhost-img" v-lazy="item.imgUrl">
          </div>
          <div class="sellhot-con">
            <p class="sellhot-title">{{item.title}}</p>
            <p class="sellhot-price">￥{{item.newsMoney}}</p>
          </div>
        </li>
        <!-- <li><img class="img-width-max" v-lazy="item.imgUrl"></li> -->
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeSellhot',
  props: {
    list: Array,
    banner: Object
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .sellhot
    a
      color: #333
    .sellhost-img
      max-height: 2rem
    .members_imgad
      overflow: hidden
      height:0
      padding-bottom: 47%
    .sellhot-item
      display: flex
      flex-direction: row
      justify-content: flex-start
      align-content: center
      align-items: stretch
      .sellhot-img
        width: 50%
        flex-shrink: 0
        padding-right: 5%
        box-sizing: border-box
      .sellhot-con
        width: 50%
        margin-top: .3rem
        .sellhot-title
          font-weight: bold
          font-size: .3rem
        .sellhot-price
          color: red
          margin-top: .1rem
          margin-bottom: .1rem
</style>
